<template>
	
	<view class="page-detail ">
		<image src="../../static/imgs/back.png" mode="" class="icon-back" @click="back"></image>
		<!-- <imgBanner :imgList='imgList' :currentImg='currentImg'></imgBanner> -->
		<view class="pro-img">
			<image :src="info.thumb" mode="" class="pro-img " style="width: 100%;"></image>
		</view>
		<view class="p-30">
			<view class="c-333 mb-14">
				{{info.title}}
			</view>
			<view class="fsb df-ac c-72 mb-30">
				<view class="text-gray">
					<text class="icon icon-clock"><image class="icon-clock-img" src="../../static/other/clock.png"></image></text> <text>2021年04月23日 00:00</text> - <text>2021年05月20日 00:00</text>
				</view>
			</view>
			<view class="fsb df-ac c-72 mb-30 bottom_line" style="padding-bottom: 20px;">
				<view class="text-gray">
					<text class="icon icon-clock"><image class="icon-clock-img" src="../../static/other/map.png"></image></text> <text>贵州青岩古镇</text>
				</view>
			</view>
			
			<view class="p-l-30 p-r-30 p-t-10">
				<view class="block-title fsb df-ac">
					<view class="df-ac">
						<view class="fz36 fw-b">已有<text>{{join_num}}</text>人报名</view>
					</view>
				</view>
			</view>
			<view class="mui-table-view img-detail-collect-ul bottom_line p-t-20" style="padding-bottom: 20px;">
				<view class="mui-table-view-cell" style="list-style:none;">					
					<view style="display: inline-block;">
						<view>
							<view id="real_collect" style="margin-right: 5px; display: inline-block;">
								<image v-for="(item,index) in join_list" :key="index" :src="item.headimgurl" alt="" class="img-detail-collect-ul-li-avatar">
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="p-l-30 p-r-30 " style="margin-top: 20px;">
				<view class="block-title fsb df-ac">
					<view class="df-ac">
						<view class="fz36 fw-b">活动发起人</view>
					</view>
				</view>
			</view>
			
			<view class="mui-table-view list-media_goods bottom_line">
				<view class="mui-table-view-cell mui-media" style="margin-top:5px;margin-bottom:10px;">
					<view class="mui-pull-left">
						<image :src="user_info.headimgurl" class="goods_img"></image>
					</view>
					<view class="mui-media-body">
						<view class="title">{{user_info.nick_name}}</view>
						<view class="text-small text-gray">
							<view class="span">{{info.slogan}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="p-l-30 p-r-30 p-t-30">
			<view class="block-title fsb df-ac">
				<view class="df-ac">
					<view class="fz36 fw-b">活动内容</view>
				</view>
			</view>
		</view>
		<view class="p-l-30 p-r-30 p-t-30 bottom_line" style="padding-bottom: 20px;" v-html="info.content">
		
		</view>
		
		<view class="p-l-30 p-r-30 p-t-30">
			<view class="block-title fsb df-ac">
				<view class="df-ac">
					<view class="fz36 fw-b">温馨提示</view>
				</view>
			</view>
		</view>
		<view class="p-l-30 p-r-30 p-t-30 " style="padding-bottom: 20px;" v-html="info.tips">
		
		</view>
		<view class="uni-common-mt">
			<view>
				<map :latitude="latitude" :longitude="longitude" :markers="covers" style="width: 100%;">
				</map>
			</view>
		</view>
		
		<view class="pro-footer ">
			<view class="btn btn-buy" v-if="info.status_key == 'sign_ing'"  @click="signUp()">立即报名</view>
			<view class="btn btn-buy bg-gray" v-else>{{info.status_info.name}}</view>
		</view>
	
	</view>
</template>

<script>
	import imgBanner from '../../components/imgsBanner-tag/imgsBanner-tag.vue'
	import "./css.scss";
	export default {
		components: {
			imgBanner
		},
		data() {
			return {
				cur:1,
				imgList:[
					// '../../static/goods/faxian1.png',
					// '../../static/goods/faxian2.png',
					// '../../static/goods/faxian3.png',
					// '../../static/goods/huodong.png',
					// '../../static/goods/faxian1.png',
					// '../../static/goods/faxian2.png',
					// '../../static/goods/faxian3.png',
					// '../../static/goods/huodong.png',
				],
				currentImg:0,  //当前默认选中
				show:false,
				userinfo:{id:2,img:'../../static/user/poster.jpg',likecount:'123',nickname:'张三',avatar:'../../static/imgs/user.jpg',title:'甄选项目 I 第七代AOPT超光子',desc:'超光子嫩肤M22+修丽可联合治疗全模式/淡斑祛痘'},
				
				platform:'',
				showshare:false,
				shareinfo:{
					url:'',
					providers:4,
					provider:{}
				},
				latitude: 24.495496,
				longitude: 118.188273,
				covers: [{
					latitude: this.latitude,
					longitude: this.longitude,
					// #ifdef APP-PLUS
					iconPath: '../../static/other/location@3x.png',
					// #endif
					// #ifndef APP-PLUS
					iconPath: '../../static/location.png',
					// #endif
				}],
				info:{},
				join_list:[],//报名列表
				join_num:0,
				user_info:{},
				id:0
			}
		},
		onLoad(options) {
			console.log("options")
			console.log(options)
			this.id = options.id
			this.init();
		},
		created() {
		},
		methods: {
			toggle(data) {
				this.cur = data.id
			},
			back() {
				uni.navigateBack()
			},
			async init() {
				var query = {
					"keyWord": "", // 模糊搜索，搜索的字段对应keyWordLikeFields
					"type": 'activity_detail', // 全等于筛选，对应fieldEq
					"id": this.id, // 第几页
				};
				console.log("请求参数")
				console.log(query)
				 let res = await this.$api.communityData(query).then(res=> {
					 console.log("活动详情")
						console.log(res)
						if(res.code == 0){
							var detail = res.detail;
							this.info = detail;
							this.imgList = [detail.thumb]
							this.join_list = res.join_list;
							var arr = Object.keys(res.join_list); 
							this.join_num = arr.length
							this.user_info = res.user_info
							this.latitude = detail.address_lat
							this.longitude = detail.address_lng
						}
						this.loadShow = false;
				 }).catch(err=> { console.log(err) }
				 );
			},
			signUp(){
				if(this.info.status == 1){
					uni.navigateTo({
						url:'/pages/huodong/signUp?id='+this.info.id
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.list-media_goods .mui-table-view-cell{
		background: none !important;
	}
	.bg-gray{
		    background: linear-gradient(225deg, #888, #888) !important;
	}
.page-detail {
	position: relative;
	background-color: #fdfdfd;
	padding-bottom: 130rpx;
	.product {
		width: 100vw;
		height: 830rpx;
		border-radius:  0 0 40rpx 40rpx;
	}
	.product-img {
		height: 830rpx;
	}
	.icon-back {
		width: 30rpx;
		height: 30rpx;
		position: fixed;
		left: 30rpx;
		top: 60rpx;
		z-index: 100;
	}
	.tab-pro {
		.tab-pro-item {
			font-size: 30rpx;
			color: #282A32;
			height: 110rpx;
			line-height: 110rpx;
			margin-bottom: 30rpx;
			text-align: center;
			position: relative;
			&.active {
				font-size: 36rpx;
				color: #000;
				&::after {
					content:'';
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 0;
					width: 110rpx;
					height: 7rpx;
					background-color: #573BD1;
					font-weight: bold;
				}
			}
		}
	}
	.pro-param {
		line-height: 40rpx;
		font-size: 30rpx;
		padding: 30rpx;
		border-bottom: 1px solid #ECECEC;
		.param-label {
			width: 120rpx;
			text-align: right;
			color: #706B7D;
		}
		.param-value {
			text-align: right;
			color: #282A32;
		}
	}
	.pro-footer {
		padding: 50rpx;
		background-color: #fff;
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		text-align: center;
		.btn {
			padding: 20rpx 40rpx;
			color: #fff;
			font-size: 26rpx;
			box-shadow: 0px 7rpx 22rpx -7rpx rgba(255,121,109,0.70); 
			border-radius: 7rpx;
			&.btn-add {
				background: linear-gradient(225deg,#ff9668, #ff5d72);
			}
			&.btn-buy{
				background: linear-gradient(90deg, #282a32, #353535);
			}
			&:first-child {
				margin-right: 20rpx;
			}
		}
		.icon-footer {
			flex:1;
			image {
				width: 50rpx;
				height: 50rpx;
				// flex:1;
			}
		}
	}
	.tag-total {
		position: absolute;
		border-radius: 50%;
		padding: 4rpx;
		font-size: 22rpx;
		background-color: #FE5634;
		color: #fff;
		top: 0;
		right: 0;
	}
}

</style>
